<script lang="ts" setup>
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

let router=useRouter()

let bookData=ref(null)


axios.get("http://localhost:8080/api/books",{
  headers:{
    "Authorization": "Bearer " + localStorage.getItem("token")
  }
}).then((res)=>{
    // console.log(res.data)
    bookData.value=res.data
})

function handleDetail(data:any){
    //  console.log(data.row.id,data.row.name)
     router.push({
       path:"/details",
       query:{
         id:data.row.id
       }
    })
}

let formData=ref({
  name:"",
  type:""
})
function submit(){
  console.log(formData.value)
  axios.get("http://localhost:8080/api/books",{
    params: formData.value
  }
  ).then((res)=>{
    bookData.value=res.data
  })
}

</script>

<template>
<h1>图书管理系统</h1>

  <form action="" > <!--@submit.prevent="submit" -->
      书名<input type="text" v-model="formData.name" placeholder="请输入图书名">
      类型<input type="text" v-model="formData.type" placeholder="请输入图书类型">
      <el-button size="small" type="primary" style="margin-left: 10px;" @click="submit">搜索</el-button>
  </form>

  <el-table :data="bookData" style="width: 100%">
    <el-table-column prop="id" label="Id" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="type" label="type" />
    <el-table-column fix="right" label="操作" min-width="120">
      <template #default="data">
        <el-button size="small" type="primary" @click="handleDetail(data)">详情</el-button>
        <el-button size="small" type="primary">编辑</el-button>
        <el-button size="small" type="primary">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<style scoped>

</style>